import { Canvas, Story, Meta } from "@storybook/blocks";
import { Box, Flex } from "metabase/ui";
import * as SidesheetStories from "./Sidesheet.stories";

import { Sidesheet } from "./Sidesheet";
import { SidesheetCard } from "./SidesheetCard";
import { SidesheetCardSection } from "./SidesheetCardSection";
import { SidesheetButton, SidesheetButtonWithChevron } from "./SidesheetButton";

import { TestTabbedSidesheet, TestPagedSidesheet } from "./Sidesheet.samples";

<Meta of={SidesheetStories} />

# Sidesheet

## When to use a Sidesheet

## Docs

## Caveats

## Usage guidelines

## Examples

// TODO: figure out how to get CSS modules working with storybook 🔥

<Canvas of={SidesheetStories.Default} />

### With cards

<Canvas of={SidesheetStories.WithCards} />

### With sectioned cards

<Canvas of={SidesheetStories.WithSectionedCards} />

### With pages

<Canvas of={SidesheetStories.WithSubPages} />

### With tabs

<Canvas of={SidesheetStories.WithTabs} />

### Sidesheet Buttons

<Canvas of={SidesheetStories.SidesheetButtons} />
